<template>
<div>
  <el-container>
    <el-header class="homeHeader">
      <div id="title">
      后台管理系统
        <!--
        默认el-icon-s-fold
        el-icon-s-unfold
        -->
        <i :class="fold" @click="changeFold" title="展开/折叠" style="color: #ffffff"></i>
      </div>

      <el-badge :value="12" class="item">
        <i class="el-icon-message-solid"></i>
      </el-badge>
      <el-dropdown class="userInfo" @command="handleCommand">

        <span class="el-dropdown-link" >
         {{userName}}
        <img src="../assets/face.jpeg" class="face"/>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>

              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">注销账户</el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
    </el-header>
    <el-container>
      <el-aside :width="mwith">
        <el-menu router unique-opened="true" :collapse="collapse">
          <el-submenu :index="index+''"  v-for="(item,index) in routers"
                      v-if="!item.hidden"
                      :key="index"
                      >
            <template slot="title"><i :class="item.iconCls" class="fa"  style="color: cornflowerblue;margin-right: 5px;"></i><span slot="title">{{item.name}}</span></template>
            <el-menu-item-group :index="index">
              <el-menu-item :index="children.path"
                v-for="(children,indexj) in item.children" :key="indexj" style="margin-left: 10px;">
                <i :class="children.iconCls" class="fa"  style="color: cornflowerblue;margin-right: 5px;"></i>
                {{children.name}}
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>
        </el-menu>

      </el-aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
          <el-breadcrumb-item :to="{ path: '/home' }">
            <i class="el-icon-s-home"></i> 首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:this.$router.currentRoute.path}" v-if="this.$router.currentRoute.path!='/home'">{{this.$router.currentRoute.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
        <div v-if="this.$router.currentRoute.path=='/home'">
          <h1>欢迎使用</h1>
        </div>
      </el-main>
    </el-container>
  </el-container>
  <div id="changePwd">
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" >
      <el-form :model="form" ref="form1" :rules="rules" prop="form">
        <el-form-item prop="oldPwd" label="旧密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.oldPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="newPwd" label="新密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.newPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="qdPwd" label="确认密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.qdPwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formCancle">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
name: "Home",
  computed:{
    routers(){
      return this.$store.state.routes
    }
  },
  data(){
    var validateOldPwd=(rule,value,callback)=>{
      if(!value){
         callback(new Error('旧密码不能为空'))
      }
      // 查询原来密码
      if(value!=this.pdPwd){
         callback(new Error('旧密码输入错误'))
      }
      callback();
    };
    var checkPwd=(rule,value,callback)=>{
      if(!value){
         callback(new Error("确认密码不能为空"))
      }
      if(value!=this.form.newPwd){
         callback(new Error('确认密码错误'))
      }
      callback()
    };
    return{
      formLabelWidth: '120px',
      pdPwd:'',
      userId:0,
      rules:{
        oldPwd:[{validator:validateOldPwd,trigger:'blur'}],
        newPwd:[{required:true,message:'新密码不能为空',trigger:'blur'}],
        qdPwd:[{validator:checkPwd,trigger:'blur'}]
      },
      form:{
        oldPwd:'',
        newPwd:'',
        qrPwd:''
      },
      dialogFormVisible: false,
      userName:'admin',
      fold:'el-icon-s-fold',
      collapse:false,
      mwith:'200px'
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods:{
    handleCommand(cmd) {
      if(cmd=='logout'){
        this.getRequest('/logout').then(resp=>{
          if(resp.success){
            window.sessionStorage.removeItem("userId");
            window.sessionStorage.removeItem("token");
            this.$router.replace("/")
          }
        })
      }
      if(cmd=='changePwd'){
        this.openForm();
      }
    },
    changeFold(){

      if(!this.collapse){
        this.fold='el-icon-s-unfold'
        this.collapse = true
        this.mwith='65px'
      }else{
        this.fold='el-icon-s-fold'
        this.collapse = false
        this.mwith='200px'
      }

    },
    formCancle(){
      // 取消按钮
      this.$refs.form1.resetFields()
      this.dialogFormVisible = false
    },
    formSubmit(){
      // 确认按钮
      this.$refs.form1.validate(valid=>{
        if(valid){
          // 修改密码
          let user={id:this.userId,pwd:this.form.newPwd}
          this.postRequest('/sys/user/save',user).then(resp=>{
              if(resp.success){
                this.dialogFormVisible = false;
                this.$refs.form1.resetFields()
              }
          })
        }
      })
    },
    openForm(){
      this.dialogFormVisible = true
    },
    loadUserInfo(){
      var userId = window.sessionStorage.getItem('userId');
      this.getRequest('/sys/user/info/'+userId).then(resp=>{
        if(resp.success){
          this.userName = resp.result.username;
          this.pdPwd = resp.result.pwd
          this.userId = userId
        }
      })
    }
  }

}
</script>

<style>
.homeHeader{
  background: deepskyblue;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  justify-content: space-between;
}
.homeHeader #title{
  font-size: 30px;
  color: white;
}
.userInfo{
  color:white;
  font-weight: bold;
}
.face{
  width:60px;
  height: 60px;
  border-radius: 100px;
}
.el-aside ul{
  height: 100%;
}
.item {
  margin-top: 10px;
  margin-right: 50px;
}
.el-badge__content.is-fixed{
  right:5px;
}
.el-badge__content{
  background: white;
  color: red;
}
</style>